<template>
	<view>
		<view @click="itemClick()" class="item">
			<view class="flex-row-space-between">
				<view class="flex-row-flex-start">
					<image class="header" src="/static/common/header.png" mode=""></image>
					<view class="">

						<view class="flex-row-flex-start">
							<view class="name">
								赵亚晴
							</view>
							<image class="rzImage" src="/static/common/rz.png" mode=""></image>
						</view>


						<view class="ageView flex-row-flex-start">
							<view class="manView flex-column-center">
								<image class="man" src="/static/common/woman.png" mode=""></image>
							</view>
							<view class="age">
								23岁 167cm
							</view>
						</view>
					</view>
				</view>
				<view class="followButton flex-row-center">
					<view class="follow">
						关注
					</view>
				</view>
			</view>

			<view class="content">
				我是不是你最疼爱的人 🍑
			</view>
			<view class="flex-row-flex-start flex-wrap">
				<view v-for="(item,index) in 3" :key="index">
					<image class="image" src="/static/common/image.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="flex-row-space-between">
				<view class="time">
					2023-12-12 18:22
				</view>
				<view class="flex-row-flex-end">
					<view  class="iconView flex-row-flex-end">
						<image class="icon" src="/static/tabbar/2.png" mode=""></image>
						<view class="num">
							2
						</view>
					</view>
					<view class="iconView flex-row-flex-end">
						<image class="icon" src="/static/tabbar/2.png" mode=""></image>
						<view class="num">
							2
						</view>
					</view>
					<view class="iconView flex-row-flex-end">
						<image class="icon" src="/static/tabbar/2.png" mode=""></image>
						<view class="num">
							2
						</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name: "trends",
		components: {

		},

		data() {
			return {


			};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			data: {
				type: Object,
				default: () => {
					return {}
				}
			},


		},
		created() {

		},
		methods: {
			itemClick(){
				uni.navigateTo({
					url:'/pages/trends/trendsDetail'
				})
			},
			gotoReport(item) {
				uni.navigateTo({
					url: `/pages/trends/trendsReport?goodsid=${item.id}`
				})
			}

		}
	}
</script>

<style lang="scss">
	.item {
		margin: 40rpx 20rpx;
	}

	.header {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.name {
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 550;
		color: #333333;
	}

	.rzImage {
		margin-left: 6rpx;
		width: 44rpx;
		height: 32rpx;
	}

	.ageView {
		margin-top: 12rpx;
		width: 252rpx;
		height: 36rpx;
		background: linear-gradient(270deg, rgba(246, 106, 183, 0) 0%, #FF959566 100%);
		border-radius: 18rpx;

	}

	.manView {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		background: linear-gradient(90deg, #F66AB7 0%, #FF9595 100%);
		opacity: 1;
	}

	.man {
		width: 24rpx;
		height: 24rpx;
	}

	.age {
		margin-left: 6rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FB80A6;
	}

	.followButton {
		width: 148rpx;
		height: 56rpx;
		border: 2rpx solid #ECECEC;
		border-radius: 28rpx;
	}

	.follow {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #797979;
	}

	.content {
		margin: 20rpx 0;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.image {
		margin-right: 20rpx;
		margin-bottom: 16rpx;
		width: 334rpx;
		height: 334rpx;
		background: #D8D8D8;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
	}

	.time {
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #797979;
	}
	.icon{
		width: 26rpx;
		height: 26rpx;
	}
	.num{
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #797979;
	}
	.iconView{
		margin-left: 30rpx;
	}
</style>